<!-- <head>
 页面meta -->

    <!-- <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>淘淘网</title>  -->
<!--
music
     <embed src="D:\workspace\spring\canyouspeakchinese\src\main\resources\static\pages\Starboy.mp3" hidden="flase" autostart="true" loop="true"></embed>
-->

<!-- 
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" goodsName="viewport"> -->

    <!-- 引入样式 -->
<!-- 
    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/style.css">

</head> -->
<template>
  <div class="hold-transition">
    <!--引入VUE-->
    <!-- <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> -->

    <div id="app">
      <div class="content-header">
        <h1>淘淘网，淘出你的喜爱！</h1>
      </div>

      <div class="xxxx">
        <router-link to="./loginpage/loginemail">邮箱登录</router-link><br />
        <router-link to="./loginpage/register">注册账号</router-link><br />
        <el-button type="info" @click="gotoSeckill">秒杀页面</el-button><br />
        <router-link to="./adminpage/login">后台登录页面</router-link><br />
        <router-link to="./edituser">用户信息界面</router-link><br />
        <el-button type="info" @click="logout">退出登录</el-button><br />
      </div>
      <div class="app-container">
        <div class="box">
          <!--查询组件-->
          <div class="filter-container">
            <!-- <el-input
              placeholder="商品类别"
              v-model="pagination.type"
              style="width: 200px"
              class="filter-item"
            ></el-input> -->
            <el-input
              placeholder="商品名称"
              v-model="pagination.goodsName"
              style="width: 200px"
              class="filter-item"
            ></el-input>
            <el-input
              placeholder="商品描述"
              v-model="pagination.goodsDisc"
              style="width: 200px"
              class="filter-item"
            ></el-input>
            <el-button @click="getAll()" class="dalfBut">查询</el-button>
            <!--<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                <el-button class="butT" @click="goAway()">退出登录</el-button>
                <el-button class="butT" @click="deleteUser()">注销账户</el-button>-->
          </div>

          <el-table
            size="small"
            current-row-key="id"
            :data="dataList"
            stripe
            highlight-current-row
          >
            <!--<el-table-column label="static/login/images/loginbg.png" align="center" >
                    <template slot-scope="scope">
                        　　　　<img :src="scope.row.imageUrl" width="180" height="320" class="head_pic"/>
                    </template>
                </el-table-column>-->

            <el-table-column
              label="商品封面"
              align="center"
              width="175"
              height="70"
            >
              　　<template slot-scope="scope">
                <!-- <img :src="scope.row.imgpath" width="75" height="75" class="head_pic"/> -->
                <img :src="scope.row.goodsPic" class="head_pic" />
                　　</template
              >
            </el-table-column>
            <!--<el-table-column type="index" align="center" label="序号"></el-table-column>-->
            <!-- <el-table-column
              prop="type"
              label="商品类别"
              align="center"
            ></el-table-column> -->

            <el-table-column
              prop="goodsName"
              label="商品名称"
              align="center"
            ></el-table-column>

            <el-table-column
              prop="goodsDisc"
              label="描述"
              align="center"
            ></el-table-column>

            <el-table-column
              prop="goodsStock"
              label="商品数量"
              align="center"
              width="75"
              height="75"
            ></el-table-column>

            <el-table-column
              prop="goodsPrice"
              label="商品单价"
              align="center"
              width="75"
              height="75"
            ></el-table-column>

            <!--购物车模块-->

            <el-table-column prop="goodsStockt" label="购买数量" align="center">
              <!--定义属性为goodsStockt，标签为购买数量，设置剧中-->
              <template slot-scope="scope" width="70" height="75">
                <!--插槽-->
                <!--<el-button type="primary" size="mini" @click="subtract(scope.row)">-</el-button>-->
                <el-input-number
                  v-model="scope.row.goodsStockt"
                  @change="handleSum(scope.row)"
                  placeholder="0"
                  :min="0"
                  :max="999"
                ></el-input-number>
                <!--<el-button type="danger" size="mini"@click="add(scope.row)">+</el-button>-->
              </template>
            </el-table-column>

            <!--购买总价-->
            <el-table-column
              prop="totalgoodsPrice"
              label="选购总价"
              align="center"
            >
              <!--<template slot-scope="scope">
                        <el-form v-model="scope.row.totalgoodsPrice" placeholder="0" ></el-form>
                    </template>-->
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" @click="handleGoods(scope.row)"
                  >购买</el-button
                >
              </template>
            </el-table-column>
            <!-- <el-table-column label="商品总价" align="center">

                   &lt;!&ndash;<el>总价:￥</el>&ndash;&gt;
                   &lt;!&ndash;{{goodsStockt}}&ndash;&gt;
                       &lt;!&ndash;<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

                       <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>&ndash;&gt;

                       &lt;!&ndash;<div class="box">
                           <ul>
                               <li>宝贝数量：</li>
                               <li><button @click="subtract()">-</button></li>
                               <li><input type="text" value="0" size="1" v-model="goodsStock"></li>
                               <li><button @click="add()">+</button></li>
                           </ul>
                       </div>&ndash;&gt;
               </el-table-column>-->
          </el-table>

          <!--分页组件-->
          <div class="pagination-container">
            <el-pagination
              class="pagiantion"
              @current-change="handleCurrentChange"
              :current-page="pagination.currentPage"
              :page-size="pagination.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="pagination.total"
            >
            </el-pagination>
          </div>

          <!-- 新增标签弹层 -->

          <div class="add-form">
            <el-dialog title="新增商品" :visible.sync="dialogFormVisible">
              <el-form
                ref="dataAddForm"
                :model="formData"
                :rules="rules"
                label-position="right"
                label-width="100px"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="商品类别" prop="type">
                      <el-input v-model="formData.type" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="商品名称" prop="goodsName">
                      <el-input v-model="formData.goodsName" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="24">
                    <el-form-item label="描述">
                      <el-input
                        v-model="formData.goodsDisc"
                        type="textarea"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>

                <el-button type="primary" @click="handleAdd()">确定</el-button>
              </div>
            </el-dialog>
            <!--音乐播放-->
            <!-- <audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
                       src="D:\workspace\spring\canyouspeakchinese\src\main\resources\static\pages\Starboy.mp3">
                </audio>

                <bgsound src="D:\workspace\spring\canyouspeakchinese\src\main\resources\static\pages\Starboy.mp3" autostart=true loop=infinite>
                --><!--这里是Post新建按钮弹层-->
            <!--<form action="/goods/save" method="post">
                    商品类型：<input type="text" goodsName="type">
                    商品名称：<input type="text" goodsName="goodsName">
                    商品描述：<input type="text" goodsName="goodsDisc">
                    商品样式：<input type="text" goodsName="imgpath">
                    <button type="submit">from方式保存</button>

                </form>-->
          </div>

          <!-- 编辑标签弹层 -->

          <div class="add-form">
            <el-dialog
              title="编辑检查项"
              :visible.sync="dialogFormVisible4Edit"
            >
              <el-form
                ref="dataEditForm"
                :model="formData"
                :rules="rules"
                label-position="right"
                label-width="100px"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="商品类别" prop="type">
                      <el-input v-model="formData.type" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="商品名称" prop="goodsName">
                      <el-input v-model="formData.goodsName" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="24">
                    <el-form-item label="描述">
                      <el-input
                        v-model="formData.goodsDisc"
                        type="textarea"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>

                <el-button type="primary" @click="handleEdit()">确定</el-button>
              </div>
            </el-dialog>

            <el-dialog
              title="编辑检查项"
              :visible.sync="dialogFormVisible4Edit"
            >
              <el-form
                ref="dataEditForm"
                :model="formData"
                :rules="rules"
                label-position="right"
                label-width="100px"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="商品类别" prop="type">
                      <el-input v-model="formData.type" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="商品名称" prop="goodsName">
                      <el-input v-model="formData.goodsName" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="商品数量" prop="goodsStockt">
                      <el-input v-model="formData.goodsStock" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="24">
                    <el-form-item label="描述">
                      <el-input
                        v-model="formData.goodsDisc"
                        type="textarea"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>

                <el-button type="primary" @click="handleEdit()">确定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 引入组件库 -->
<!-- 
<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script> -->

<script>
import axios from "axios";
import router from "../router";
export default {
  data() {
    return {
      goodsImg: "",
      goodsList: [],
      goodsStockt: 0, //用户选择商品数
      totalgoodsPrice: 0, //商品总价
      dataList: [], //当前页要展示的列表数据
      dialogFormVisible: false, //添加表单是否可见
      dialogFormVisible4Edit: false, //编辑表单是否可见
      postDialogFormVisible: false,
      formData: {}, //表单数据
      postData: [], //post数据
      rules: {
        //校验规则
        type: [
          { required: true, message: "商品类别为必填项", trigger: "blur" },
        ],
        goodsName: [
          { required: true, message: "商品名称为必填项", trigger: "blur" },
        ],
      },
      pagination: {
        //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 3, //每页显示的记录数
        total: 0, //总记录数
        type: "",
        goodsName: "",
        goodsDisc: "",
        name: "",
        description: "",
      },
    };
  },

  //钩子函数，VUE对象初始化完成后自动执行
  created() {
    this.getAll();
  },

  methods: {
    //退出登录
    logout() {
      var storage = window.localStorage;
      storage.clear();
      this.$message({
        message: "用户已退出",
        type: "success",
      });
    },
    //登录秒杀页面
    gotoSeckill() {
      this.$axios
        .get("/seckill/gotoSeckillPage", {
          headers: {
            "x-access-token": localStorage.getItem("x-access-token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200 && res.data.extend.result == "登陆成功") {
            router.push("./seckillpage/index");
          } else if (
            res.data.code == 401 &&
            res.data.extend.result == "用户不存在！"
          ) {
            this.$message.error("请先登录账号，才能参与秒杀活动");
          } else if (
            res.data.code == 401 &&
            res.data.extend.result == "token已过期，请重新登录"
          ) {
            this.$message.error("您已经很久没登录了，请重新登录");
          }
        });
    },
    //列表
    //分页查询
    getAll() {
      //组织参数，拼接url请求地址
      // console.log(this.pagination.type);
      // let param = "?type=" + this.pagination.type;
      let param = "?goodsName=" + this.pagination.goodsName;
      param += "&goodsDisc=" + this.pagination.goodsDisc;
      // console.log(param);

      //发送异步请求
      this.request
        .get(
          "/goods/" +
            this.pagination.currentPage +
            "/" +
            this.pagination.pageSize +
            param
        )
        .then((res) => {
          this.pagination.pageSize = res.data.size;
          this.pagination.currentPage = res.data.current;
          this.pagination.total = res.data.total;
          this.dataList = res.data.records;
          var leng = res.data.records.length;
          // for (var i = 0; i < leng; i++) {
          //   this.goodsImg =
          //     "../../static/goodsImg/" +
          //     res.data.records[i].goodsPic.substring(46);
          //   this.goodsList[i] = this.goodsImg;
          // }
          console.log(this.goodsList);
        });
    },

    //弹出添加窗口
    handleCreate() {
      var that = this;
      that.dialogFormVisible = true;
      that.resetForm();
    },

    //重置表单
    resetForm() {
      var that = this;
      that.formData = {};
    },
    /* //购买按钮
            tiaozhuan() {
                var that = this;
                axios.get("/goods")
                    .then(function (response) {
                        that.$message.success("您的订单即将提交！");
                        this.dialogFormVisible4Edit = true;
                    })
            },*/
    //添加
    handleAdd() {
      var that = this;
      this.request
        .post("/goods", that.formData)
        .then(function (response) {
          //判断当前操作是否成功
          if (response.data.flag) {
            //关闭弹层
            that.dialogFormVisible = false;
            //提示添加成功
            that.$message.success(response.data.exmessage);
          } else {
            that.$message.error(response.data.exmessage);
          }
        })
        .finally(function () {
          //成功失败都会重新加载数据
          that.getAll();
        });
    },
    //用户注销
    /*deleteUser(){
                this.$confirm("将永久删除此账号，是否继续？","提示",{type:"info"}).then(()=> {
                        axios.delete("/users/" + row.id).then((resp) => {
                            //判断当前操作是否成功
                            if (resp.data.flag) {
                                //提示删除成功
                                this.$message.success("删除成功");
                            } else {
                                this.$message.error("数据同步失败,已刷新");
                            }
                        })
                    },*/
    /*//增加商品
            add(row){
                console.log(this.goodsStockt);
                console.log(this.row);
                console.log(row);
                row.goodsStockt++;
            },
            //减少商品
            subtract(row) {
                console.log(this.goodsStockt);
                console.log(this.row);
                console.log(row);
                if (row.goodsStockt <= 0) {
                    alert('受不了啦，宝贝不能再减少啦')
                    row.goodsStockt = 0;
                } else {
                    row.goodsStockt -= 1;
                }
            },*/
    //商品总价
    handleSum(row) {
      row.totalgoodsPrice = row.goodsStockt * row.goodsPrice;
      /*console.log(this.totalgoodsPrice);
                console.log(row);*/
    },

    //用户退出
    goAway() {
      alert("用户已登出*-*");
      window.location.href = "/users/goaway";
    },

    //Post方式添加
    postHandleAdd() {
      var postParam = formData.type;

      window.location.href = "/goods/save";
    },

    //取消
    cancel() {
      var that = this;
      that.dialogFormVisible = false;
      that.dialogFormVisible4Edit = false;
      that.postDialogFormVisible = false;
      that.$message.info("当前操作已取消");
    },
    // 删除
    handleDelete(row) {
      this.$confirm("将永久删除该数据，是否继续？", "提示", { type: "info" })
        .then(() => {
          this.request
            .delete("/goods/" + row.id)
            .then((resp) => {
              //判断当前操作是否成功
              if (resp.data.flag) {
                //提示删除成功
                this.$message.success("删除成功");
              } else {
                this.$message.error("数据同步失败,已刷新");
              }
            })
            .finally(() => {
              this.getAll();
            }); //下面是点击取消的操作
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

    //弹出编辑窗口
    // handleUpdate(row) {
    //   this.request
    //     .get("/goods/" + row.id)
    //     .then((resp) => {
    //         console.log(resp.data);
    //       if (resp.data.flag && resp.data.data != null) {
    //         this.dialogFormVisible4Edit = true;
    //         this.formData = resp.data.data;
    //       } else {
    //         this.$message.error("数据同步失败,已刷新");
    //       }
    //     })
    //     .finally(() => {
    //       this.getAll();
    //     });
    // },

    //修改
    // handleEdit() {
    //   var that = this;
    //   this.request
    //     .put("/goods", that.formData)
    //     .then((resp) => {
    //       //判断当前操作是否成功
    //       if (resp.data.flag) {
    //         //提示修改成功
    //         this.dialogFormVisible4Edit = false;
    //         this.$message.success("修改成功");
    //       } else {
    //         this.dialogFormVisible4Edit = false;
    //         this.$message.error("修改失败,该数据或已被删除");
    //       }
    //     })
    //     .finally(() => {
    //       this.getAll();
    //     }); //下面是点击取消的操作
    // },

    //订单
    handleGoods(row) {
      var that = this;
      this.$confirm("即将提交该条订单，是否继续？", "提示", {
        type: "info",
      }).then(() => {
        this.request
          .post(
            "/orders/" +
              row.goodsName +
              "/" +
              row.totalgoodsPrice +
              "/" +
              row.goodsPrice,
            {
              headers: {
                "x-access-token": localStorage.getItem("x-access-token"),
              },
            }
          )
          .then((resp) => {
            console.log(resp);
            if (resp.code == 401 && "用户不存在！" == resp.extend.result) {
              this.$message.error("请先登录再购买商品");
            } else if (resp.code == 200)
                   //去到订单页面
          router.push("./edituser");
     
        
            // 下面是点击取消的操作
          })
          .catch(() => {
            // this.$message.info("已取消订单");
          });
      });
    },
    //分页查询

    //切换页码
    handleCurrentChange(currentPage) {
      var that = this;
      //修改页码值为当前选中的页码值
      that.pagination.currentPage = currentPage;
      //执行查询
      that.getAll();
    },

    //条件查询
  },
};
</script>


<style>
ul,
li {
  list-style: none;
}
li {
  float: left;
}
input {
  text-align: center;
}
.head_pic {
  width: 9.375rem;
}
.xxxx {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap;
}
</style>
